import { ArrowRight, Heart, Location, Logout, Order, Refund, Tips } from '@nutui/icons-react-taro';
import { Avatar } from '@nutui/nutui-react-taro';
import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import BasicLayout from '@/components/BasicLayout';
import Copyright from '@/components/Copyright';
import useViewer from '@/hooks/useViewer';
import { useCallback } from 'react';

const Mine = () => {
  const { data } = useViewer()
  // 关于我们
  const onClickAboutUs = () => {
    Taro.navigateTo({ url: '/pages/AboutUs/index' });
  };

  const onClickMyOrder = () => {
    Taro.navigateTo({ url: '/pages/Order/index' });
  };

  const onClickMyCollect = () => {
    Taro.navigateTo({ url: '/pages/MyCollect/index' });
  };

  const onClickMyAddress = () => {
    Taro.navigateTo({ url: '/pages/MyAddress/index' });
  };

  const onClickMyComment = useCallback(() => {
    Taro.navigateTo({ url: '/pages/MyComment/index' });
  }, [])

  const onLogout = useCallback(() => {
    Taro.setStorage({
      key: "token",
      data: ""
    })
    Taro.navigateTo({ url: '/pages/Login/index' });
  }, [])

  return (
    <BasicLayout>
      {/* 用户信息 开始 */}
      <View className="w-full px-[40rpx] pt-[140rpx] pb-[40rpx] box-border bg-gradient-to-tl from-[#157658] to-[#156c76]">
        <View className="w-full flex flex-row">
          <Avatar size="large" src="https://avatars.githubusercontent.com/u/64878070?v=4" />
          <View className="flex-1 ml-[30rpx] flex-justify flex-col color-[#fff] overflow-hidden">
            <View className="text-[32rpx] truncate">{data?.name}</View>
            <View className="mt-[10rpx] text-[24rpx]">{data?.hash_key}简介</View>
          </View>
        </View>
        <View className="w-full h-[120rpx] mt-[20rpx] flex flex-row">
          <View
            className="w-[49%] h-full flex-center flex-col color-[#fff]"
            onClick={onClickAboutUs}
          >
            <Tips size="32rpx" />
            <View className="text-[28rpx] mt-[10rpx]">关于我们</View>
          </View>
        </View>
      </View>
      <View className="mx-[24rpx] my-[24rpx] px-[20rpx] bg-[#fff] rounded-2">
        <View className="flex-center w-full h-[110rpx] border-bottom" onClick={onClickMyOrder}>
          <View className="flex-[0_0_8%]">
            <Order size="40rpx" />
          </View>
          <View className="flex-[0_0_82%] flex-align text-[32rpx]">全部订单</View>
          <View className="flex-[0_0_10%] flex justify-end">
            <ArrowRight size="30rpx" />
          </View>
        </View>
        <View className="flex-center w-full h-[110rpx] border-bottom" onClick={onClickMyCollect}>
          <View className="flex-[0_0_8%]">
            <Heart size="40rpx" />
          </View>
          <View className="flex-[0_0_82%] flex-align text-[32rpx]">我的收藏</View>
          <View className="flex-[0_0_10%] flex justify-end">
            <ArrowRight size="30rpx" />
          </View>
        </View>
        <View className="flex-center w-full h-[110rpx]" onClick={onClickMyAddress}>
          <View className="flex-[0_0_8%]">
            <Location size="40rpx" />
          </View>
          <View className="flex-[0_0_82%] flex-align text-[32rpx]">我的地址</View>
          <View className="flex-[0_0_10%] flex justify-end">
            <ArrowRight size="30rpx" />
          </View>
        </View>
        <View className="flex-center w-full h-[110rpx]" onClick={onClickMyComment}>
          <View className="flex-[0_0_8%]">
            <Location size="40rpx" />
          </View>
          <View className="flex-[0_0_82%] flex-align text-[32rpx]">我的评论</View>
          <View className="flex-[0_0_10%] flex justify-end">
            <ArrowRight size="30rpx" />
          </View>
        </View>
        <View className="flex-center w-full h-[110rpx]" onClick={onLogout}>
          <View className="flex-[0_0_8%]">
            <Logout size="40rpx" />
          </View>
          <View className="flex-[0_0_82%] flex-align text-[32rpx]">退出登录</View>
          <View className="flex-[0_0_10%] flex justify-end">
            <ArrowRight size="30rpx" />
          </View>
        </View>
      </View>
      <Copyright />
    </BasicLayout>
  );
};

export default Mine;
